<template>
    <div class="outter-rapper">
        <el-tabs type="border-card">
            <el-tab-pane label="数据集">
                <el-row>
                    <el-col :span="5" v-for="dataset in datasets" :key="dataset.id" :offset="1">
                      <el-card :body-style="{ padding: '0px' }" style="margin-top: 20px">
                        <img :src="dataset.pictures[0]" class="image">
                        <div style="padding: 12px;">
                          <span>{{dataset.name}}</span>
                          <div class="description">
                            {{dataset.description}}
                          </div>
                          <div class="bottom clearfix">
                            <time class="time">{{ dataset.createTime }}</time>
                          </div>
                        </div>

                        <div style="display: flex; justify-content: end; margin: 10px">
                            <el-button type="primary" round size="small">编辑</el-button>
                            <el-button type="danger" round size="small">删除</el-button>
                        </div>
                      </el-card>
                    </el-col>
                </el-row>
            </el-tab-pane>
    
            <el-tab-pane label="任务">
                任务
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>


export default {
    data() {
        return {
            datasets:[
                {
                    id: "1",
                    pictures:["https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"], 
                    name: "食物",
                    createTime: "2024-3-4",
                    description: "一些食物一些食物一些食物一些食物一些食物一些食物一些食食物一些食物一些食物一些食物一些食物一些食物一些食物一些食物一些物一些食物一些食物一些食物一些食物一些食物",
                },
                {
                    id: "2",
                    pictures:["https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"], 
                    name: "食物",
                    createTime: "2024-3-4",
                    description: "一些食物一些食物一些食物一些食物一些食物一些食物一些食食物一些食物一些食物一些食物一些食物一些食物一些食物一些食物一些物一些食物一些食物一些食物一些食物一些食物",
                },
                {
                    id: "3",
                    pictures:["https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"], 
                    name: "食物",
                    createTime: "2024-3-4",
                    description: "一些食物一些食物一些食物一些食物一些食物一些食物一些食食物一些食物一些食物一些食物一些食物一些食物一些食物一些食物一些物一些食物一些食物一些食物一些食物一些食物",
                },
                {
                    id: "4",
                    pictures:["https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"], 
                    name: "食物",
                    createTime: "2024-3-4",
                    description: "一些食物一些食物一些食物一些食物一些食物一些食物一些食食物一些食物一些食物一些食物一些食物一些食物一些食物一些食物一些物一些食物一些食物一些食物一些食物一些食物",
                },
                {
                    id: "5",
                    pictures:["https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"], 
                    name: "食物",
                    createTime: "2024-3-4",
                    description: "一些食物一些食物一些食物一些食物一些食物一些食物一些食食物一些食物一些食物一些食物一些食物一些食物一些食物一些食物一些物一些食物一些食物一些食物一些食物一些食物",
                },
                {
                    id: "6",
                    pictures:["https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"], 
                    name: "食物",
                    createTime: "2024-3-4",
                    description: "一些食物一些食物一些食物一些食物一些食物一些食物一些食食物一些食物一些食物一些食物一些食物一些食物一些食物一些食物一些物一些食物一些食物一些食物一些食物一些食物",
                }
            ],
            currentDate: new Date()
        }
    },
    components: {
        
    },
    methods: {
      
    }
}
</script>

<style>
    .outter-rapper {
        margin-top: -15px;
        margin-left: -15px;
    }

    .time {
        font-size: 13px;
        color: #999;
      }

    .description {
        font-size: 13px;
        width: parent;
        height: 52px;
        overflow-y: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        color: #999;
      }
      
      .bottom {
        margin-top: 13px;
        line-height: 12px;
      }
    
      .button {
        padding: 0;
      }
    
      .image {
        width: 100%;
        display: block;
      }
    
      .clearfix:before,
      .clearfix:after {
          display: table;
          content: "";
      }
      
      .clearfix:after {
          clear: both
      }
</style>